<template>
	<view>
        <public-module></public-module>
        <wlk-navbar title="校验手机号" navbarType='0'></wlk-navbar>
        <view class="check-content">
            <view class="title">填写验证码</view>
            <view class="bz">已发送短信验证码至 <span class="mobile ml05">{{userInfo.mobile}}</span></view>
            <view class="code-box" @click="focus">
                <u-code-input disabled-keyboard v-model="code" @finish="finish" :color="themeColor" :borderColor="themeColor"  bold :focus="true" size="50" mode="line" :maxlength="6" hairline></u-code-input>
            </view>
            <view class="get-code" :style="'color: '+themeColor">
                <u-code
                        ref="uCode"
                        @change="codeChange"
                        keep-running
                        start-text="点我获取验证码"
                ></u-code>
                <text
                        @tap="getCode"
                        :text="tips"
                >{{tips}}</text>
            </view>
         </view>
        <u-keyboard :unique-key="event" :showTips="false" :overlay="false" safeAreaInsetBottom ref="uKeyboard" :dotDisabled="true" @cancel="cancel" @confirm="confirm" @change="valChange" @backspace="backspace"  mode="number" :show="showKeyboard"></u-keyboard>
	</view>
</template>

<script>
    var _self;
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    import { toUrl } from '@/wlkutils/tools';
	export default {
        computed: {
            ...mapGetters(['userInfo','themeColor'])
        },
		data() {
			return {
                code:'',
                tips:'',
                event:'',
                showKeyboard:false,
                mobile:'',

			};
		},
        onLoad(option) {
            _self = this;
            this.event = option.event;
            if(option.mobile){
                this.mobile = option.mobile;
            }
        },
        onReady(){
            this.getCode();
            this.showKeyboard = true;
        },
        methods:{
            ...mapActions(["getUserInfo"]),
            cancel(){
                this.showKeyboard =  false;
            },
            confirm(){
                if(this.code.length==6){
                    this.showKeyboard=false;
                    this.finish();
                }else{
                    _self.$u.toast('请输入验证码');
                }
            },
            focus(){
                if(this.showKeyboard==false){
                    this.showKeyboard = true;
                }
            },
            codeChange(text) {
                this.tips = text;
            },
            finish(){
                if(_self.event=='changepwd'){
                    uni.$u.http.post('sms/check',
                        {
                            event: _self.event,
                            captcha: _self.code
                        },
                    ).then(res => {
                        toUrl('/pages/user/changepwd');
                    })
                }else if(_self.event=='changemobile'){
                    _self.changeMobile()
                }

            },
            changeMobile(){
                uni.$u.http.post('user/changeMobile',
                    {
                        mobile: _self.mobile,
                        captcha: _self.code
                    },
                ).then(res => {
                    _self.getUserInfo();
                    uni.$u.toast(res.msg);
                    setTimeout(function () {
                        toUrl('/pages/index/user');
                    },1000)
                });
            },
            getCode() {
                if (this.$refs.uCode.canGetCode) {
                    uni.$u.http.post('sms/send',
                        {
                            event: _self.event,
                            mobile: _self.mobile
                        },
                    ).then(res => {
                        this.$refs.uCode.start();
                        _self.$u.toast('验证码已发送，请注意查收短信');
                    });
                } else {
                    uni.$u.toast('倒计时结束后再发送');
                }
            },
            valChange(val) {
                // 将每次按键的值拼接到value变量中，注意+=写法
                if(this.code.length<6){
                    this.code += val;
                    if(this.code.length==6){
                        this.showKeyboard=false;
                        this.finish();
                    }
                }
            },
            // 退格键被点击
            backspace() {
                // 删除value的最后一个字符
                if(this.code.length) this.code = this.code.substr(0, this.code.length - 1);
            }
        }
	}
</script>

<style lang="scss">
    .check-content{
        width: 92%;
        margin: 0 auto;
        .title{
            font-size: 50rpx;
            font-weight: bold;
            margin-top: 140rpx;
        }
        .bz{
            font-size: $font-base;
            color: $uni-text-color-grey;
            line-height: 80rpx;
            .mobile{
                color: #000000;
            }
        }
        .code-box{
            margin-top: 80rpx;
        }
        .get-code{
            font-size: $font-base;
            margin-top: 40rpx;
        }
    }
</style>
